<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>事件绑定操作</title>
	</head>
	<body>
		<!-- 事件冒泡：由于操作过程中可能有嵌套的关系，所有会触发冒泡机制，
			 如果阻止冒泡通常使用,stop进行修饰
		 -->
		<div id="cpp">
			<h1>计算机案例</h1>
			数据1：<input type="text" v-model="num1"/><br>
			数据2：<input type="text" v-model="num2" @keydown.enter="addNum()"/> 
			&nbsp<button @click ="addNum">计算</button><br>
			总数：{{count}}
		</div>
		
		
		<script src="../js/vue.js" ></script>
		<script>
			/*
			 业务思路
			1.动态获取用户的数据
			2.准备一个加法的方法
			3.将结果进行展现
			
			*/ 
			const app=new Vue({
				
				el:'#cpp',
				data:{
					num1:'',
					num2:'',
					count:''
				},
				methods:{
					addNum(){
						this.count=parseInt(this.num1)+parseInt(this.num2)
						console.log(this.count)
					}
				}
				
			})
			
			
		</script>
	</body>
</html>
